import React, { Suspense } from 'react'
import { Router, Route, Switch, Redirect } from 'react-router-dom'
import AuthRoute from './components/AuthRoute'
import history from './utils/history'
// 懒加载
const Home = React.lazy(() => import('@/pages/Layout'))
const Login = React.lazy(() => import('@/pages/Login'))
const ProfileEdit = React.lazy(() => import('@/pages/Profile/Edit'))
const Chat = React.lazy(() => import('@/pages/Profile/Chat'))
const FeedBack = React.lazy(() => import('@/pages/Profile/FeedBack'))
const NotFound = React.lazy(() => import('@/pages/NotFound'))
export default function App() {
  return (
    <div className="app">
      <Router history={history}>
        {/* fallback懒加载时显示 */}
        <Suspense fallback={<div>...loading</div>}>
          <Switch>
            <Redirect exact from="/" to="/home"></Redirect>
            <Route path="/login" component={Login}></Route>
            <Route path="/home" component={Home}></Route>

            {/* 修改个人资料 */}
            <AuthRoute path="/profile/edit" component={ProfileEdit}></AuthRoute>
            {/* <Route
              path="/profile/edit"
              render={() => {
                if (hasToken()) {
                  return <ProfileEdit></ProfileEdit>
                } else {
                  return <Redirect to="/login"></Redirect>
                }
              }}
            ></Route> */}
            {/* 小智 */}
            <AuthRoute path="/profile/chat" component={Chat}></AuthRoute>
            {/* 反馈 */}
            <AuthRoute
              path="/profile/feedback"
              component={FeedBack}
            ></AuthRoute>

            {/* 404 */}
            <Route component={NotFound}></Route>
          </Switch>
        </Suspense>
      </Router>
    </div>
  )
}
